<template>
	<view class="_teacher_index">
		<view class="_teacher_index" @click="goTeacher">
			<image class="teacher_img" :src="_avatar" mode="aspectFit"></image>
			<view class="teacher-info">
				<view class="u-flex u-flex-between u-m-b-8">
					<text class="f-s-14 f-w-b">{{ props.teacher.name }}</text>
					<up-icon name="map" color="#999" size="14" labelSize="12px" labelColor="#999" :label="props.teacher.city" ></up-icon>
				</view>
				<view class="teacher-slogan u-line-1">{{ props.teacher.label }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		defineProps
	} from 'vue';

	const props = defineProps({
		teacher: Object
	})

	const _avatar = computed(() => {
		return (props.teacher.callingBg || props.teacher.avatar)  //+ "?x-oss-process=image/resize,m_lfit,h_175"
	})


	function goTeacher() {
		uni.navigateTo({
			url: '/subPackages/teacher/index?userId=' + props.teacher.userId
		})
	}
</script>

<style lang="scss" scoped>
	._teacher_index {
		padding: 1px;
		.teacher_img {
			// 从左到右渐变
			background: linear-gradient(to right, #E8EBF2, #E8EBF2 40%, #EEEFF4 70%, #F3F4F8);
			width: 100%;
			height: 175px;
			border-radius: 8px 8px 0 0;
		}

		.teacher-info {
			padding: 8px;
			text-align: left;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 4px #0000000a;


			.teacher-slogan {
				line-height: 18px;
				font-size: 12px;
				color: #333
			}

		}
	}
</style>